<!--
 * @Date: 2022-04-16 19:04:10
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-07-10 11:35:53
 * @FilePath: \weibovue\src\components\Reply.vue
 * @Description: something
-->
<template>
  <el-dialog
    width="30%"
    top="30vh"
    center
    :show-close="false"
    v-model="dialogTableVisible"
    @close="close"
  >
    <div class="replyBox">
      <h3>{{ title }}</h3>
      <el-input
        v-model="textarea"
        class="elInput"
        :rows="5"
        maxlength="300"
        type="textarea"
        placeholder="写下你的回复吧"
      />
      <span>{{ textarea.length }}/200</span>
      <div class="bottom">
        <div class="tools">
          <emoji @getEmoji="getEmoji">
            <div class="icon">
              <i class="iconfont icon-emoji"></i>
            </div>
          </emoji>
        </div>
        <el-button
          type="warning"
          plain
          :disabled="disabled"
          round
          @click="submitReply"
          >发送</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import {
  computed,
  getCurrentInstance,
  inject,
  onMounted,
  PropType,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import emoji from "../components/emoji/index.vue";
import { UserData } from "./Topic/types";
const emits = defineEmits(["close"]);
const textarea = ref<string>("");
const title = ref<string>("");
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
const getComment = inject("getComment", () => {});
const store = useStore();
let disabled = computed(() => {
  return textarea.value.trim() == "" ? true : false;
});
const props = defineProps({
  dialogTableVisible: {
    type: Boolean,
    default: false,
  },
  ReplyUserInfo: {
    type: Object as PropType<UserData>,
  },
  parantId: {
    type: Number,
  },
  commentId: {
    type: Number,
  },
  blogId: {
    type: Number,
  },
  type: {
    type: String,
  },
});
//获取选择的表情
const getEmoji = (emoji: { emoji: string }) => {
  textarea.value += emoji;
};
//发布回复评论
const submitReplyComment = async (
  replyUserId: number,
  data: { content: string; type: string },
  parantId: number = -1,
  commentId: number = -1,
  blogId: number,
) => {
  // console.log(replyUserId, data, parantId, commentId,blogId, "id是这些");

  let res = await $api.topic.reqCreateReply(
    replyUserId,
    data,
    parantId,
    commentId,
    blogId,
  );
  // console.log(res, replyUserId, data, parantId, commentId, blogId);
  if (res.code == 200) {
    textarea.value = "";
    ElMessage.success("回复成功!");
    getComment();
  }
};

const submitReply = () => {
  if (!store.state.isLogin) {
    ElMessage.error("请先登录!");
  }
  emits("close", false);
  textarea.value = `回复 @${props.ReplyUserInfo?.nickName} - ${props.ReplyUserInfo?.id} :${textarea.value}`;
  submitReplyComment(
    props.ReplyUserInfo?.id!,
    { content: textarea.value, type: props.type! },
    props.parantId,
    props.commentId,
    props.blogId!,
  );
};
const close = () => {
  textarea.value = "";
  emits("close", false);
};
watch(
  () => props.ReplyUserInfo!,
  (val: UserData) => {
    title.value = `回复给@${val.nickName}`;
  },
);
</script>
<style lang="less" scoped>
.el-dialog {
  .el-dialog__header {
    padding: 0 !important;
  }
  .el-dialog__body {
    padding: 0 !important;
    .replyBox {
      flex: 1;
      h3 {
        margin: 0 0 10px 5px;
      }
      .elInput {
        margin: 10px 0;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        .tools {
          .icon {
            font-size: 18px;
            cursor: pointer;
            &:hover {
              color: #ff8200;
            }
          }
        }
      }
    }
  }
}
</style>
